<template>
  <div class="app-container">
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>接口定义导入</span>
        </div>
        <div style="margin-bottom:50px; width: 650px">
          <el-alert close-text="Get!" show-icon style="margin-bottom: 10px" title="目前只支持 json 格式的 OpenAPI（swaggerApi） 格式文件" type="info" />
          <el-form ref="dataForm" :model="temp" :rules="rules" label-position="right" label-width="100px">
            <el-form-item label="文件" prop="url" style="margin-bottom: 30px;">
              <Upload v-model="temp" :multiple="false" file_type=".json" list_type="text" />
              <span />
            </el-form-item>
            <el-form-item label="导入文件类型">
              <el-select v-model="importFileType" placeholder="请选择导入文件类型" style="width: 350px">
                <el-option v-for="item in fileTypeOptions" :key="item.value" :disabled="item.disabled" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-form>
          <div style="text-align: right">
            <el-button :disabled="typeof temp.serverFileName === 'undefined'" :loading="importLoading" type="primary" @click="importAPI()">导入</el-button>
          </div>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import Upload from '@/components/Upload'
import { apiFileImport } from '@/api/functional_test/test_data_manage/api'
import { getTaskStatus } from '@/api/tools/taskManager'

export default {
  components: { Upload },
  data() {
    return {
      importLoading: false,
      temp: {
        id: undefined,
        url: '',
        serverFileName: undefined
      },
      importFileType: 3, // 导入文件类型
      fileTypeOptions: [ // 文件类型 options
        {
          value: 3,
          label: ' OpenAPI（swaggerApi）'
        }, {
          value: 4,
          label: 'Postman（Postman Collection v2.1）'
        }
      ],
      rules: {
        url: [
        ]
      }
    }
  },
  methods: {
    resetTemp() {
      this.temp = {
        id: undefined,
        url: '',
        serverFileName: undefined
      }
    },
    // 点击开始导入
    importAPI() {
      this.importLoading = true
      apiFileImport(this.importFileType, this.temp.serverFileName, this.$store.getters.projectId).then(response => {
        this.temp.taskId = response.data.taskId
        this.$message({ message: '导入文件上传成功，开始异步数据导入!', type: 'success' })
        this.checkTaskStatus()
      })
    },
    // 查询导入结果
    checkTaskStatus() {
      this.checkTaskStatusTimer = setInterval(() => {
        getTaskStatus(this.temp.taskId).then(response => {
          if (response.data.status >= 3) {
            if (response.data.status === 5) {
              this.$message({ message: '数据导入成功!', type: 'success' })
            } else if (response.data.status === 3) {
              const h = this.$createElement
              this.$msgbox({
                title: '消息',
                message: h('p', null, [
                  h('span', null, response.data.msg + '：'),
                  h('a', { style: 'color: #409EFF', attrs: { href: response.data.detailData }}, '点击下载查看失败原因')
                ]),
                confirmButtonText: '确定'
              }).then(action => {
              })
            } else if (response.data.status === 4) {
              this.$message({ message: response.data.msg, type: 'error' })
            }
            clearInterval(this.checkTaskStatusTimer)
            this.resetTemp()
            this.importLoading = false
          }
        })
      }, 1000)
    }
  }
}
</script>
